<script setup>
import { ref } from 'vue';
import { userUpdataPwd } from '@/api/user.js'

const formRef = ref()
const formData = ref({
    old_pwd: '',
    new_pwd: '',
    re_pwd: ''
})
const rules = {
    old_pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15位的非空字符',
            trigger: 'blur'
        }
    ],
    new_pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15位的非空字符',
            trigger: 'blur'
        }
    ], re_pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15位的非空字符',
            trigger: 'blur'
        },
        {  // 自定义校验
            //  validator: (rule, value, callback)
            // rule  当前校验规则相关的信息
            // value 所校验的表单元素目前的表单值
            // callback 无论成功还是失败，都需要callback回调
            //      -callback() 校验成功
            //      -callback(new Error(错误信息)) 校验失败
            validator: (rule, value, callback) => {
                if (value !== formData.value.new_pwd) {
                    callback(new Error('两次密码输入不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
}
// 修改密码
const updataPwd = async () => {
    await formRef.value.validate()
    await userUpdataPwd(formData.value)
    ElMessage.success('密码修改成功')

}


</script>

<template>
    <PageContainer title="重置密码">
        <el-form label-width="120px" label-position="right" class="formContainer" :model="formData" :rules="rules"
            ref="formRef">
            <el-form-item label="原密码" prop="old_pwd">
                <el-input placeholder="请输入原密码" v-model="formData.old_pwd"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="new_pwd">
                <el-input placeholder="请输入新密码" v-model="formData.new_pwd"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="re_pwd">
                <el-input placeholder="请输入新密码" v-model="formData.re_pwd"></el-input>
            </el-form-item>
            <el-form-item class="submit-btn-wrapper">
                <el-button type="primary" @click="updataPwd">修改密码</el-button>
                <el-button>重置</el-button>
            </el-form-item>
        </el-form>
    </PageContainer>
</template>
<style lang="scss" scoped>
.formContainer {
    width: 50%;

    // padding: 0 20px;
    /* 统一对齐所有表单项 */
    :deep(.el-form-item) {
        display: flex;
        align-items: center;
        margin-bottom: 25px;


        /* 标签宽度固定 */
        .el-form-item__label {
            width: 100px;
            text-align: right;
            padding-right: 12px;
        }

        .el-input__wrapper {
            padding: 7px 11px;
            width: 100%;
        }
    }

    :deep(.submit-btn-wrapper) {
        .el-form-item__label {
            display: none;
        }

        .el-form-item__content {
            margin-left: 100px !important;
            flex: 1;
        }
    }

}
</style>